<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background-color: rgb(255, 255, 255);
			}

			.mui-navigate-right {
				font-weight: 700;
				font-size: 1.125rem;
			}

			.hot {
				background-color: rgb(255, 255, 255);
			}

			.img-group {
				width: 100%;
				height: 6.25rem;
				display: flex;
				padding: 0.625rem 0.625rem;
				justify-content: space-around;
				box-sizing: border-box;
			}

			.img-group img {
				display: block;
				width: 100%;
				height: 100%;


			}

			.img-group .img {
				width: 30%;
				border-radius: 0.3125rem;
				overflow: hidden;
			}

			.mui-slider-item img {
				height: 10.0625rem;
			}

			.fenlei {
				background-color: rgb(255, 255, 255);
			}

			.fenlei-item {
				display: flex;
				width: 100%;
				background-color: rgb(255, 255, 255);
				margin-top: 0.3125rem;
			}

			.feilei-img {
				flex: 1;
				margin: 0.3125rem 0.3125rem;
				border-radius: 0.3125rem;
				overflow: hidden;
			}

			.feilei-img img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.fenlei-long {
				flex: 2;
			}

			.white {
				background-color: rgb(255, 255, 255);
			}

			.live {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
			}

			.live-item {
				width: 45%;
				position: relative;
			}

			.live-img {
				height: 6.25rem;
			}

			.live-img img {
				display: block;
				height: 100%;
				width: 100%;
			}

			.live-redu {
				font-size: 0.75rem;
				text-align: center;
				color: rgb(255, 255, 255);
				width: 120px;
				position: absolute;
				left: 10px;
				top: 5px;

				background-color: rgba(0, 0, 0, .5);
				border-radius: 10px;
			}

			.live-redu span {
				width: 40px;
				background-color: rgb(70, 71, 75);
				display: inline-block;
				height: 100%;
				border-radius: 10px;
			}

			.live-title {
				width: 100%;
				height: 27px;
				line-height: 27px;
				font-size: 12px;
				color: #333;
				overflow: hidden;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.live-content {
				position: relative;
				display: none;
				z-index: 999;
				left: 0;
				top: 150px;
			}

			.close-live {
				background-color: red;
				width: 100px;
				height: 30px;
				position: relative;
				top: -114px;
				right: -275px;
				line-height: 30px;
				border-radius: 10px;
				z-index: 9999;
			}

			#fugai {
				width: 110px;
				height: 30px;
				position: absolute;
				border-radius: 10px;
				top: 12px;
				right: 13px;
				background-color: rgb(248, 248, 248);
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">直播</h1>
		</header>

		<div class="mui-content">
			<div class="mui-scroll-wrapper" style="margin-top: 44px;">
				<div class="mui-scroll">
					<!--这里放置真实显示的DOM内容-->

					<!-- 轮播图 -->
					<div id="myslider" class="mui-slider ">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="../img/v2_e7bd6cbb259443bb9b3811142430ba5f_img_png.png">
								</a>
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item ">
								<a href="#">
									<img src="../img/v2_62ca3edd7cca4dd1847c370e8efc44b5_img_jpg.jpg">
								</a>
							</div>
							<!-- 第二张 -->
							<div class="mui-slider-item ">
								<a href="#">
									<img src="../img/v2_78e50d39c67f4ca295e3f2da62b0f314_img_jpg.jpg">
								</a>
							</div>
							<!-- 第三张 -->
							<div class="mui-slider-item ">
								<a href="#">
									<img src="../img/v2_f084082f582844848027d20bee197f16_img_jpg.jpg">
								</a>
							</div>
							<!-- 第四张 -->
							<div class="mui-slider-item ">
								<a href="#">
									<img src="../img/v2_e7bd6cbb259443bb9b3811142430ba5f_img_png.png">
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item  mui-slider-item-duplicate">
								<a href="#">
									<img src="../img/v2_62ca3edd7cca4dd1847c370e8efc44b5_img_jpg.jpg">
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
					<!-- 轮播图 -->


					<div class="hot">
						<div class="mui-table-view-cell">
							<a class="mui-navigate-right">
								热门栏目
							</a>
						</div>
						<div class="img-group">
							<div class="img">
								<img src="../img/v2_49fb0a7f5782446984a493377ebb23b5_img_png.png">
							</div>
							<div class="img">
								<img src="../img/v2_f03f5e90227c4c279cba5036ffebac58_img_jpg.jpg">
							</div>
							<div class="img">
								<img src="../img/v2_6974111e973b42da95d2ca90747292ec_img_jpg.jpg">
							</div>

						</div>

					</div>
					<div class="fenlei">
						<div class="mui-table-view-cell">
							<a class="mui-navigate-right">
								热门分类
							</a>
						</div>

						<div class="fenlei-imgs">
							<div class="fenlei-item fenlei-up">
								<div class="feilei-img fenlei-long">
									<img src="../img/img_all.png">
								</div>
								<div class="feilei-img">
									<img src="../img/img_workplace.png">
								</div>
								<div class="feilei-img">
									<img src="../img/img_technology.png">
								</div>
							</div>
							<div class="fenlei-item fenlei-down">
								<div class="feilei-img fenlei-long">
									<img src="../img/img_content.png">
								</div>
								<div class="feilei-img">
									<img src="../img/img_finance.png">
								</div>
								<div class="feilei-img">
									<img src="../img/img_technology.png">
								</div>
							</div>
						</div>

					</div>

					<div class="jingcai white">
						<div class="mui-table-view-cell">
							<a class="mui-navigate-right">
								精彩回顾
							</a>
						</div>

						<div class="live">

							<!-- <div class="live-item">
								<div class="live-img">
									<img src="https://rpic.douyucdn.cn/live-cover/roomCove_coverUpdate_2022-03-10_4a3fd65c8f51642f738a6cdf6c3186d0.jpg/dy1" >
								<div class="live-redu">
									<span>回放</span>
									3.3w热度
								</div>
								</div>
								<div class="live-title">
									预告丨17点 上海RNGMvs济南RW侠
								</div>
											
							</div>
							
							
							<div class="live-item">
								<div class="live-img">
									<img src="https://rpic.douyucdn.cn/live-cover/roomCove_coverUpdate_2022-03-10_4a3fd65c8f51642f738a6cdf6c3186d0.jpg/dy1" >
								<div class="live-redu">
									<span>回放</span>
									3.3w热度
								</div>
								</div>
								<div class="live-title">
									预告丨17点 上海RNGMvs济南RW侠
								</div>
											
							</div>
							
							
							<div class="live-item">
								<div class="live-img">
									<img src="https://rpic.douyucdn.cn/live-cover/roomCove_coverUpdate_2022-03-10_4a3fd65c8f51642f738a6cdf6c3186d0.jpg/dy1" >
								<div class="live-redu">
									<span>回放</span>
									3.3w热度
								</div>
								</div>
								<div class="live-title">
									预告丨17点 上海RNGMvs济南RW侠
								</div>
											
							</div>
							
							<div class="live-item">
								<div class="live-img">
									<img src="https://rpic.douyucdn.cn/live-cover/roomCove_coverUpdate_2022-03-10_4a3fd65c8f51642f738a6cdf6c3186d0.jpg/dy1" >
								<div class="live-redu">
									<span>回放</span>
									3.3w热度
								</div>
								</div>
								<div class="live-title">
									预告丨17点 上海RNGMvs济南RW侠
								</div>
											
							</div>
							 -->
						</div>



					</div>





				</div>
			</div>








		</div>


		<div class="live-content">
			<!-- <iframe id="iframe" src="" width="100%" height="260px"></iframe> -->

			<div id="fugai">

			</div>
		</div>
		<div class="close-live">
			关闭直播
			<span>X</span>
		</div>


	</body>
	<script src="../js/myurl.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		(function($) {
			$(".mui-scroll-wrapper").scroll({
				//bounce: false,//滚动条是否有弹力默认是true
				//indicators: false, //是否显示滚动条,默认是true
			});
		})(mui);
		
		//轮播图开启
		var slider = mui('#myslider')
		slider.slider({
			interval: 2000
		})
		


		mui.get(myurl+'/view/live', function(data) {
			console.log(data);
			const lives = data.data

			let htmlStr = ''

			lives.forEach(item => {
				htmlStr += `
				
				<div class="live-item" url = ${item.url}>
					<div class="live-img">
						<img src=${item.vertical_src} >
					<div class="live-redu">
						<span>回放</span>
						${(item.online/10000).toFixed(1)}w热度
					</div>
					</div>
					<div class="live-title">
						${item.room_name}
					</div>
								
				</div>
				
				`
			})

			mui('.live')[0].innerHTML = htmlStr

		}, 'json')


		mui('.live').on('tap', '.live-item', function() {
			// console.log(this.getAttribute('url'));
			const url = 'https://m.douyu.com' + this.getAttribute('url')
			const iframe = document.createElement('iframe')
			iframe.id = 'iframe'
			iframe.style.height = '260px'
			iframe.style.width = '100%'
			mui('.live-content')[0].appendChild(iframe)
			mui('#iframe')[0].src = url
			mui('.live-content')[0].style.display = 'block'

		})

		mui('.close-live')[0].addEventListener('tap', function() {
			mui('.live-content')[0].style.display = 'none'
			mui('.live-content')[0].removeChild(mui('#iframe')[0])
		})
	</script>
</html>
